<template>
	<div class="list-tree-box">
		<avue-tree class="filter-tree" v-model="form" :option="option" :data="menuTreeData" @save="rowSave" @update="update"
		@node-click="nodeClick" @del="delnode" @on-load="onLoad">
			<template slot-scope="{row}" slot="icon">
				<div style="text-align:center">
					<i :class="row.icon"></i>
				</div>
			</template>
		</avue-tree>
	</div>
</template>
<script>
	import {
		getList,
		delrowData,
		getMenuTree,
		update,
		add
	} from "@/api/admin/menu";
	import iconList from "@/config/iconList";
	import {
		mapGetters
	} from "vuex";
	export default {
		props: ["Event"],
		data() {
			return {
				form: {},
				addMenuData: [],
				menuTreeData: [],
				editForm: [],
				menuId: "",
				box: false,
				treeItem: {},
				tablelist: [],
				page: {
					currentPage: 1,
					total: 0,
					pageSize: 10
				},
				option: {
					dialogWidth: "80%",
					nodeKey: "id",
					size: "small",
					addBtn: true,
					editBtn: true,
					filter: false,
					delBtn: true,
					rowKey: 'menuId',
					formOption: {
						labelWidth: 100,
						query: {},
						loading: true,
						addBtn: true,
						saveBtn: true,
						menuBtn: true,
						menuPostion: "right",
						submitBtn: true,
						emptyBtn: true,
						submitSize: "small",
						submitText: "保存",
						emptyText: "取消",
						emptySize: "small",
						column: [ {
								type: "input",
								label: "路由地址",
								span: 12,
								display: true,
								prop: "url",
								placeholder: "role",
								required: true,
								rules: [{
									required: true,
									message: "菜单名称必须填写"
								}]
							},
							{
								label: "上级菜单",
								prop: "pcode",
								type: "tree",
								dicUrl: "/api/menu/listTree",
								hide: true,
								props: {
									label: "name",
									value: "code",
									children: "children"
								},
								rules: [{
									required: false,
									message: "请选择上级菜单",
									trigger: "name"
								}]
							},
							{
								label: "菜单图标",
								prop: "icon",
								type: "icon-select",
								slot: true,
								iconList: iconList,
								rules: [{
									required: true,
									message: "请选择菜单图标",
									trigger: "click"
								}]
							},
							{
								label: "菜单编号",
								prop: "code",
								search: true,
								rules: [{
									required: true,
									message: "请输入菜单编号",
									trigger: "blur"
								}]
							},
							{
								type: "radio",
								label: "是否菜单",
								dicData: [{
										label: "是",
										value: "Y"
									},
									{
										label: "否",
										value: "N"
									}
								],
								span: 12,
								valueDefault: "Y",
								prop: "menuFlag",
							},
							{
								type: "number",
								label: "菜单排序",
								dicData: [{
										label: "是",
										value: "1"
									},
									{
										label: "否",
										value: "0"
									}
								],
								span: 12,
								display: true,
								prop: "sort",
								required: true,
								rules: [{
									required: true,
									message: "请选择是否菜单"
								}],
								placeholder: "0"
							}
						]
					},
					props: {
						labelText: "菜单名称",
						value: "menuId",
						label: "name",
						children: "children"
					}
				}
			};
		},
		created() {
			this.getMenuTrees();
		},
		computed: {
			...mapGetters(["permission", 'userInfo']),
			permissionList() {
				return {
					addBtn: this.vaildData(this.permission["/mall-cloud-system/dict/addItem"], true),
					viewBtn: this.vaildData(this.permission["/mall-cloud-system/dict/detail"], true),
					delBtn: this.vaildData(this.permission["/mall-cloud-system/dict/delete"], true),
					editBtn: this.vaildData(this.permission["/mall-cloud-system/dict/editItem"], true)
				};
			},
		},
		methods: {
			getMenuTrees(){
				getMenuTree().then(res => { //初始化请求树结构数据
					if (res.status == 200) {
						this.menuTreeData = res.data.data
					}
				})
			},
			// 新增节点方法
			rowSave(row, loading, done) {
				// this.form.pid=row.menuId
				this.form.pcode = row.code
				// this.form.pcodes=row.pcodes
				add(this.form).then(() => {
					loading = false
					this.onLoad(this.page);
					this.$message({
						type: "success",
						message: "新增成功!"
					});
					this.getMenuTrees();
					done();
				});
			},
			//删除节点方法
			delnode(data,loading, done) {
				delrowData(data.menuId).then(res => {
					console.log(res)
					loading = false
					if (res.data.code == 200) {
						this.$message({
							type: "success",
							message: "删除成功"
						});
						this.getMenuTrees();
						done();
					}
				});
			},
			// 修改节点方法
			update(row,index,done,loading) {
				console.log(row)
				console.log(index)
				console.log(done)
				console.log(loading)
				console.log("修改节点")
				update(this.form).then(() => {
					loading=false
					this.onLoad(this.page);
					this.$message({
						type: "success",
						message: "修改成功!"
					});
					this.getMenuTrees();
					done();
				});
			},
			onLoad(page, params = {}) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					this.loading = false;
					const data = res.data;
					this.page.total = data.count;
					this.data = data.data
				});
			},
			beforeOpen(done, type) {
				if (["edit", "view"].includes(type)) {
					getList(this.form.menuId).then(res => {
						this.form = res.data.data;
					});
				}
				done();

			},
			nodeClick(data) {
				this.treeItem = data;
				// let menuId = this.treeItem.menuId;
				// let pcode = this.treeItem.pcode;
				//点击请求表格数据
				// getList(1, 10, { menuId, pcode }).then(res => {
				//   if (res.status == 200) {
				//       console.log(res);
				//       this.tablelist = res.data;
				//     this.send(); //调用send方法 将tablelist值传给兄弟组件table
				//   }
				// });
				this.send();
			},
			//给兄弟table组件发送数据
			send() {
				this.Event.$emit("tablelist", {
					treeItem: this.treeItem
				});
			}
		},
		components: {}
	};
</script>
<style>
	.list-tree-box {
		width: 100%;
		height: 450px;
		max-height: 450px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
	}

	.filter-tree {
		flex: 1;
		border: 1px solid #dcdfe6;
		border-radius: 6px;
		overflow-y: scroll;
	}

	.btn-group {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
</style>
